<template>
	<div>
		<div class="mb-[10px] flex items-center gap-4">
			<cl-date-picker
				v-model="appointmentTime"
				type="datetimerange"
				valueFormat="YYYY-MM-DD HH:mm:ss"
				placeholder="请选择时间"
			></cl-date-picker>
			<cl-export-btn :columns="exportColumns" :data="tableData" filename="预约行为数据" />
		</div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="salesName" label="销售" width="120" align="center" />
			<el-table-column prop="appointCount" label="预约数" width="120" align="center" />
			<el-table-column prop="cancelCount" label="取消数" width="120" align="center" />
			<el-table-column prop="validCount" label="有效数" width="120" align="center" />
		</el-table>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'appointment-board'
});

import { useCool } from '/@/cool';
import { onMounted, ref, watch, computed } from 'vue';
import dayjs from 'dayjs';

const { service } = useCool();
const tableData = ref([]);
const columns = ref([]);
const visitType = ref('');
const appointmentTime = ref([
	dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
	dayjs().format('YYYY-MM-DD HH:mm:ss')
]);

const exportColumns = computed(() => {
	return [
		{
			label: '销售',
			prop: 'salesName'
		},
		{
			label: '预约数',
			prop: 'appointCount'
		},
		{
			label: '取消数',
			prop: 'cancelCount'
		},
		{
			label: '有效数',
			prop: 'validCount'
		}
	];
});

// 监听时间变化并查询
watch(appointmentTime, val => {
	if (val && val.length === 2) {
		getData();
	}
});

// 监听就诊类型变化
watch(visitType, () => {
	getData();
});

onMounted(async () => {
	getData();
});

// 获取数据
function getData() {
	const params = {
		startTime: appointmentTime.value[0],
		endTime: appointmentTime.value[1]
	};
	console.log(params);
	service.appointment.info.appointSalesBoard(params).then(res => {
		tableData.value = res;
	});
}
</script>
